<template>
    <h1>{{ obj }}</h1>
    <button @click="changeAge">对象加一</button>
</template>


<script setup lang="ts" name="WacthRef">
import { reactive, watch } from 'vue'
let obj = reactive({ name: '李四', age: 90 })
let person = reactive({
    name: '张三',
    age: 18,
    car: {
        c1: '奔驰',
        c2: '宝马'
    }
})
function changeAge() {
    obj.age += 1
}
// 监听对象数据 reactive默认开启深度监控
watch(obj, (newVal, oldVal) => {
    console.log("obj发生了变化");
})

// 监听对象数据中的某个基本类型属性 reactive默认开启深度监控
watch(() => person.name, (newVal, oldVal) => {
    console.log("person的name发生了变化");
})
// 监听对象数据中的某个对象类型属性需要手动开启深度监控
watch(() => person.car, (newVal, oldVal) => {
    console.log("person的car发生了变化");
}, { deep: true })
// 监控多个数据
watch([() => person.car, person.name], (newVal, oldVal) => {
    console.log("person的car发生了变化");
}, { deep: true })
</script>


<style scoped>
/* @import url(); 引入公共css类 */
</style>